<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>审核信息管理</title>
		<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
		<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script type="text/javascript" src="../../lib/vue/vue.js"></script>
		<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
		<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
		<script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="../../static/UEditor/ueditor.config.js"></script>
		<script type="text/javascript" charset="utf-8" src="../../static/UEditor/ueditor.all.js"></script>
		<script type="text/javascript" charset="utf-8" src="../../static/UEditor/lang/zh-cn/zh-cn.js"></script>
		<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
		<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
		<script type="text/javascript" src="../../static/js/webApi.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style type="text/css">
			html,
			body,
			#app,
			.el-container {
				padding: 0px;
				margin: 0px;
				height: 100%;
			}

			.el-main {
				padding: 4px;
			}

			.el-divider--horizontal {
				display: block;
				height: 1px;
				width: 100%;
				margin: 8px 0px;
			}

			.el-menu--horizontal>.el-menu-item {
				height: 50px;
			}

			[v-cloak] {
				display: none;
			}

			.el-descriptions-item__content {
				max-width: 200px;
			}

			.el-descriptions-item__label.is-bordered-label {
				width: 150px;
			}
		</style>
	</head>

	<body>
		<el-container id="app" v-cloak>
			<el-container>
				<el-main style="width: 100%;height: 100%;">
					<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
						style="margin-bottom: 10px;" @select="handleSelect">
						<el-menu-item index="1">待审核申请</el-menu-item>
						<el-menu-item index="2">已审核申请</el-menu-item>
					</el-menu>
					<el-form :inline="true" :model="queryData" ref="queryData" label-width="80px" label-position="right"
						size="mini" style="height: 35px;" @submit.native.prevent>
						<el-form-item label="业务类型">
							<el-input v-model="queryData.bizType" clearable placeholder="请输入业务类型"></el-input>
						</el-form-item>
						<el-form-item label="流程名称">
							<el-input v-model="queryData.lcName" clearable placeholder="请输入流程名称"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button size="mini" icon="el-icon-search" @click="search_query">查询</el-button>
							<el-button size="mini" icon="el-icon-refresh-right" @click="reset">重置</el-button>
						</el-form-item>
					</el-form>

					<vxe-grid border ref="xGrid" resizable show-overflow highlight-current-row="true" keep-source stripe
						:height="tableHeight" size="mini" :loading="dataLoading"
						:edit-config="{trigger:'click', mode:'row'}" :header-cell-style="{'text-align':'center'}"
						:data="tableData" :sort-config="{remot:true}" :pager-config="tablePage"
						@page-change="handlePageChange">
						<vxe-table-column type="seq" field="id" title="id" width="60" align="right"></vxe-table-column>
						<vxe-table-column field="title" title="标题" width="240" align="left">
						</vxe-table-column>
						<vxe-table-column field="bizType" title="业务类型" width="120" align="center">
							<template #default="{row}">
								<span v-if="row.bizType === '1000'">活动通告</span>
								<span v-else-if="row.bizType === '1001'">建言献策</span>
								<span v-else-if="row.bizType === '1002'">会员加入</span>
								<span v-else-if="row.bizType === '1003'">活动信息</span>
								<span v-else-if="row.bizType === '1004'">学习园区</span>
								<span v-else-if="row.bizType === '1005'">解说点位</span>
								<span v-else-if="row.bizType === '1006'">培训课程</span>
								<span v-else-if="row.bizType === '1007'">志愿者管理</span>
								<span v-else>类型未定义</span>
							</template>
						</vxe-table-column>
						<vxe-table-column field="lcName" title="任务所属流程名称" width="240" align="center">
						</vxe-table-column>
						<vxe-table-column title="数据状态" width="120" align="center">
							<template slot-scope="scope">
								{{scope.row.state==1?'新增待审核':(scope.row.state==4?'审核通过':'驳回')}}
							</template>
						</vxe-table-column>
						<vxe-table-column field="recTime" title="到达时间" width="160" align="center">
						</vxe-table-column>
						<vxe-table-column field="oper" title="处理人" width="120" align="center">
						</vxe-table-column>
						<vxe-table-column field="operTime" title="处理时间" width="140" align="left">
						</vxe-table-column>
						<vxe-table-column field="cuser" title="创建人" width="120" align="center">
						</vxe-table-column>
						<vxe-table-column field="cTime" title="创建时间" width="140" align="center">
						</vxe-table-column>
						<vxe-table-column title="操作" width="200" align="center" fixed="right">
							<template slot-scope="{row}">
								<el-button v-if="activeIndex=='1'" type="text" size="small"
									@click="editEvent(row)">审核</el-button>
								<el-button v-if="activeIndex=='2'" type="text" size="small"
									@click="editEvent(row)">查看详情</el-button>
							</template>
						</vxe-table-column>
					</vxe-grid>

					<vxe-modal v-model=showModal :title="activeIndex=='1'?'审核':'查看详情'" fullscreen remember
						v-loading="submitLoading" resize destroy-on-close @close="closeEvent()">
						<el-descriptions title="基础信息" border :column="3">
							<el-descriptions-item v-for="(item,index) in baseData" :label="item.name"
								v-if="item.colType!='textarea '">
								{{item.value}}
							</el-descriptions-item>
						</el-descriptions>
						<el-descriptions :column="1" border>
							<el-descriptions-item v-if="richtext" :label="richTextTitle">
								<div id="contentEditor"></div>
							</el-descriptions-item>
							<el-descriptions-item v-if="attn && attn.length>0" label="附件">
								<div>
									<el-image style="width:100px;height:100px;margin-left:10px;"
										v-for="img in imageList" :src="img.url"></el-image>
									<a :href="office.url" style="margin-left:10px;" v-for="office in officeList">{{office.attName}}</a>
									<br>
									<video :src="video.url"  autoplay v-for="video in videoList"></video>
								</div>
								<!-- <el-image v-for="img in imageList" :src="img.url"></el-image> -->
								<!-- <div style="width:200px;height:200px;" v-if="att.url" v-for="(att, index) in attn" :key="index">
									<template v-if="att.addType=='fm'">
										<el-image :src="att.url"></el-image>
									</template>
									<template v-if="att.addType=='mp3' && att.url">
										<audio :src="att.url"></audio>
									</template>
									<template v-if="att.addType=='fj' && att.url">									 
										<video v-if="att.attName.indexOf('.mp4')>-1" :src="att.url"></video>
										<a v-else :href="att.url">{{att.url}}</a>
									</template>
								</div> -->
							</el-descriptions-item>
						</el-descriptions>

						<el-row style="text-align:right;margin:10px;" v-if="activeIndex=='1'">
							<el-button type="primary" size="mini" @click="passTask()">通过</el-button>
							<el-button type="danger" size="mini" @click="rejectTask()">驳回</el-button>
							<el-button plain size="mini" @click="closeEvent()">取消</el-button>
						</el-row>
					</vxe-modal>
				</el-main>
			</el-container>
		</el-container>


	</body>
	<script type="text/javascript">
		window.onload = function() {
			var main = {
				data() {
					return {
						tabId: 1,
						innerHeight: "100%",
						tableHeight: "100%",
						activeName: 0,
						dataLoading: false,
						tableData: [],
						activeIndex: '1',
						showModal: false,
						submitLoading: false,
						selectRow: null,
						formData: {
							title: null,
							bizType: null,
							lcName: null,
							cUser: null,
							cTime: null,
							op: null,
							dsc: null
						},
						baseData: [],
						attn: [],
						contentEditor: null,
						richtext: '',
						richTextTitle: '',
						tablePage: {
							perfect: true,
							total: 0,
							currentPage: 1,
							pageSize: 20,
							align: 'left',
							pageSizes: [30, 50, 100, 200],
							layouts: [
								'Sizes',
								'PrevJump',
								'PrevPage',
								'Number',
								'NextPage',
								'NextJump',
								'FullJump',
								'Total'
							]
						},
						queryData: {
							bizType: '',
							lcName: ''
						},
						imageList: [],
						officeList: [],
						videoList:[]

					}
				},
				created() {
					this.getWaitTask();
					this.uploadUrl = window.curl + '/attach/uploadAtt';
					UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
					UE.Editor.prototype.getActionUrl = function(action) {
						if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadvideo') {
							let path = window.curl + '/attach/uploadUeditorAtt';
							return path; //调用后台接口上传图片   
						} else {
							return this._bkGetActionUrl.call(this, action);
						}
					}
					this.contentEditor = UE.getEditor('contentEditor', {
						initialFrameWidth: '100%',
						initialFrameHeight: 250,
						elementPathEnabled: false, //删除元素路径
						pasteplain: true,
						/* 纯文本粘贴 */
						autoHeightEnabled: true,
						/* 启用右侧滚轮,默认是true自动长高模式*/
						autoFloatEnabled: true

					});
					this.contentEditor.addListener('ready', () => {
						this.contentEditor.setDisabled();
						this.contentEditor.setContent(this.richtext);
					});

				},
				mounted() {
					this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 64;
				},
				methods: {
					handleSelect(key, keyPath) {
						this.activeIndex = key;
						this.search_query();
					},
					search_query() {
						this.tablePage.currentPage = 1;
						if (this.activeIndex == "1") {
							this.getWaitTask();
						} else {
							this.getDoneTask();
						}
					},
					handleClick() {

					},
					//分页
					handlePageChange({
						currentPage,
						pageSize
					}) {
						this.tablePage.currentPage = currentPage
						this.tablePage.pageSize = pageSize
						this.getWaitTask();
					},
					cellDBLClickEvent({
						row,
						rowIndex,
						$rowIndex,
						column,
						columnIndex,
						$columnIndex,
						$event
					}) {
						if (columnIndex > 1) {
							this.editEvent(row);
						}
					},
					getWaitTask() {
						let self = this;
						this.tabId = 1;
						const params = {
							bizType: "",
							title: "",
							bizId: "",
							page: this.tablePage.currentPage,
							rows: this.tablePage.pageSize
						};
						self.dataLoading = true;
						webApi("/comm/getWaitTask", "post", params, function(res) {
							self.dataLoading = false;
							if (res.code == 200) {
								self.tableData = res.data.list;
								self.tablePage.total = res.data.total;
							} else {
								self.$XModal.message({
									message: res.msg,
									status: 'error'
								})
							}
						}, function(error) {
							self.dataLoading = false;
							self.$XModal.message({
								message: res.msg,
								status: 'error'
							})
						});
					},
					getDoneTask() {
						let self = this;
						this.tabId = 2;
						const params = {
							bizType: "",
							title: "",
							bizId: "",
							page: this.tablePage.currentPage,
							rows: this.tablePage.pageSize
						};
						self.dataLoading = true;
						webApi("/comm/getDoneTask", "post", params, function(res) {
							if (res.code == 200) {
								self.dataLoading = false;
								self.tableData = res.data.list;
								self.tablePage.total = res.data.total;
							} else {
								self.$XModal.message({
									message: res.msg,
									status: 'error'
								})
							}
						}, function(error) {
							self.dataLoading = false;
							self.$XModal.message({
								message: res.msg,
								status: 'error'
							})
						});
					},
					editEvent(row) {
						this.formData = {
							title: row.title,
							bizId: row.bizId,
							bizType: row.bizType,
							lcName: row.lcName,
							cUser: row.cUser,
							cTime: row.cTime,
							op: row.op,
							dsc: row.dsc
						}
						this.selectRow = row
						this.showModal = true
						this.submitLoading = true;
						this.getInfo();
					},
					getInfo() {
						let self = this;
						const params = this.formData;
						// console.log("this.formData.bizType：",this.formData.bizType)
						self.baseData = [];
						self.attn = [];
						webApi("/comm/getData", "post", params, function(res) {
							self.submitLoading = false;
							if (res.code == 200) {
								// console.log(res,"res");
								self.baseData = res.data.ob
								self.attn = res.data.att;
								let obj = res.data.ob.find((item) => {
									return item.colType == 'textarea '
								})
								if (obj) {
									self.richTextTitle = obj.name;
									self.richtext = obj.value;

								}
								self.imageList = res.data.att.filter(item => item.addType == 'fm');
								self.officeList = res.data.att.filter(item => (item.addType == 'docx' || item
									.addType == 'pptx') && item.url);
								self.videoList = res.data.att.filter(item=>item.addType=='mp4' && item.url);
								console.log(self.imageList)
								//console.log("attn里面的数据:",self.attn);
							} else {
								self.$message({
									message: res.msg,
									type: 'error',
									center: true
								})
							}
						}, function(error) {
							self.$message({
								message: res.msg,
								type: 'error',
								center: true
							})
							self.submitLoading = false;
						})
					},
					passTask() {
						this.formData.op = 101;
						this.completeTask(this.formData);
						this.closeEvent();
					},
					rejectTask() {
						this.formData.op = 102;
						this.completeTask(this.formData);
						this.closeEvent();
					},
					completeTask(formData) {
						let self = this;
						const params = this.formData;
						self.submitLoading = true;
						webApi("/comm/completeTask", "post", params, function(data) {
							self.submitLoading = false;
							if (data.code == 200) {
								self.$message({
									message: data.msg,
									type: 'success',
									center: true
								});
								self.getWaitTask();
							} else {
								self.$message({
									message: "操作失败!",
									type: 'error',
									center: true
								})
							}
						}, err => {
							self.submitLoading = false;
						})
					},
					closeEvent() {
						this.showModal = false;
						// this.$refs[formName].resetFields();
					},
					reset() {
						this.queryData = {
							bizType: '',
							lcName: ''
						}
					}
				}
			};
			var app = Vue.extend(main);
			new app().$mount('#app');
		}
	</script>

</html>